<template>
  <!-- 组件主盒子 -->
  <div class="stbox">
    <el-header>
      <div class="DataTime">
        <div>总成装配线</div>
        <div style="font-size: 17px">
          <div v-if="isPaused">{{ formattedDate }}</div>
          <div v-else>{{ formattedDate }}</div>
        </div>
      </div>
    </el-header>
    <div class="messageInfo">
      <div>现场负责人: {{ UserData.user1 }}</div>
      <div>品质负责人: {{ UserData.user2 }}</div>
      <div>工艺设备负责人: {{ UserData.user3 }}</div>
    </div>
    <div>
      <el-row :gutter="40">
        <el-col :span="12">
          <div class="st-gbox">
            <div class="cavasbox" ref="SCEchart"></div>
          </div>
        </el-col>
        <el-col :span="12" class="text-c">
          <div class="st-gbox">
            <div class="SecondIcon">
              <div class="SecondItem" v-for="item in equipment" :key="item.serials">
                <div class="SecondName">{{ item.name }}</div>
                <div class="secondStat">
                  <div>状态:</div>
                  <div :class="{ 'chaencloe': item.connect, 'redClod': !item.connect }">{{ item.status }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 统计图 -->
    <div>
      <el-row :gutter="40">
        <el-col :span="12" class="text-c">
          <div class="paybox">
            <div class="sign">
              <div class="signItem">机种名称</div>
              <div class="signItem">计划生产数量</div>
              <div class="signItem">实际生产数量</div>
              <div class="signItem">合格数量</div>
            </div>
            <div class="sign" style="background-color: #3f72ab">
              <div class="signItem">{{ tableData.aircraft }}</div>
              <div class="signItem">{{ tableData.amount }}</div>
              <div class="signItem">{{ tableData.totals }}</div>
              <div class="signItem">{{ tableData.actual }}</div>
            </div>
            <!-- <div class="cavasbox" ref="payEchart"></div> -->
          </div>
        </el-col>
        <el-col :span="12" class="text-c">
          <div class="paybox" style="display: flex;">
            <div class="cavaFlex" ref="payNumEchart"></div>
            <div class="cavaFlex" ref="payEchart"></div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>

import * as Chart from 'echarts';
import { getoutputlist, grtmachine, roletask } from "@/api/index";
export default {
  name: "welcome",
  data() {
    return {
      date: new Date(),
      intervalId: null,
      UserData: {},
      isPaused: false,
      machineNo: "",
      type: "day",
      equipment: [],
      tableData: {},
      //  销售总笔数
      option: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        title: {
          left: "center",
          top: "9",
          text: "每小时产能数量",
          textStyle: {
            color: "#fdfdfe", // 设置标题文本的颜色
          },
        },
        grid: {
          left: '3%',   // 左边距
          right: '3%',  // 右边距
          containLabel: true  // 包含刻度标签在内
        },
        axisLine: {
          lineStyle: {
            color: "#fdfdfe", //时间轴的颜色
            width: 3,
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 12,
              color: "#fdfdfe", //时间的颜色
            },
          },
        },
        legend: {
          data: ["下线固化产能", "下转转序产能","总成打码产能"],
          x: "center",
          y: "bottom",
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 18,
            color: "#fdfdfe",
          },
        },
        xAxis: [
          {
            type: "category",
            data: [

            ],
            color: "#fdfdfe",
            axisLine: {
              lineStyle: {
                color: "#fdfdfe", //时间轴的颜色
                width: 3,
              },
            },
            axisLabel: {
              textStyle: {
                fontSize: 15, // x轴文字大小
                color: "#fdfdfe", // x轴文字颜色
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: {
              margin: 14,
              textStyle: {
                fontSize: 15,
                color: "#fdfdfe",
              },
            },
          },
        ],
        series: [
          {
            name: "下线固化产能",
            type: "bar",
            data: [],
            barWidth: 15,
            barGap: 0,
            label: {
              show: true, // 显示标签
              position: 'top' // 标签位置
            },
            itemStyle: {
              color: "#ffd40b",
            },
          },
          {
            name: "下转转序产能",
            type: "bar",
            data: [],
            barWidth: 15,
            barGap: 0,
            label: {
              show: true, // 显示标签
              position: 'top' // 标签位置
            },
            itemStyle: {
              color: "#73d98d",
            },
          },
          {
            name: "总成打码产能",
            type: "bar",
            data: [],
            barWidth: 15,
            barGap: 0,
            label: {
              show: true, // 显示标签
              position: 'top' // 标签位置
            },
            itemStyle: {
              color: "#aa61c8",
            },
          },
        ],
      },
      payNumoption: {
        title: {
          subtext: "达成率",
          subtextStyle: {
            color: "#FFF", // 设置子文本颜色
            fontSize: 18, // 设置子文本大小
          },
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "horizontal",
          left: "center",
          top: "bottom",
          textStyle: {
            color: '#FFFFFF'  // 设置文字颜色
          }
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
            { value: 0, name: "NG数量" },
              { value: 0, name: "合格数量" },
            ],
            color: ['#ffc10a', '#75d378'],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            label: {
                show: true, // 显示标签
                position: 'outside', // 标签显示在扇形外面
                formatter: '{b}: {c}', // 标签格式，显示名称和数量
                fontSize: 14, // 标签文字大小
                fontWeight: 'bold' // 标签文字粗细
            },
          },
        ],
      },

      payoption: {
        title: {
          subtext: "工序不良数",
          subtextStyle: {
            color: "#FFF", // 设置子文本颜色
            fontSize: 18, // 设置子文本大小
          },
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: 'bottom',
          textStyle: {
            color: '#FFFFFF',
            fontSize: 10
            // 设置文字颜色
          }
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            label: {
              fontSize: 16  // 设置标签文字的大小
            },
            data: [],
            color: [
              '#fe4847', '#feb41d', '#9bd0cb', '#70c577', '#92b4d9',
              '#d9534f', '#5bc0de', '#5cb85c', '#f0ad4e', '#428bca',
              '#e67e22', '#8e44ad', '#3498db', '#2ecc71', '#e74c3c',
              '#1abc9c', '#f39c12', '#9b59b6', '#27ae60', '#34495e'
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
    };
  },
  // 导入组件
  components: {
    // 点聚合组件
  },
  // 创建完毕状态(里面是操作)
  created() {
    this.gitDaylist()
  },
  // 挂载结束状态(里面是操作)
  mounted() {
    this.startPolling()
    this.intervalId = setInterval(() => {
      this.date = new Date();
    }, 1000);
  },
  computed: {
    formattedDate() {
      const year = this.date.getFullYear();
      const month = this.date.getMonth() + 1; // 月份从0开始，所以需要加1
      const day = this.date.getDate();
      const hours = this.date.getHours();
      const minutes = this.date.getMinutes();
      const seconds = this.date.getSeconds();
      const weekdays = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      const weekdayText = weekdays[this.date.getDay()];
      // 格式化日期和时间
      const formattedTime = `${year}年${month < 10 ? "0" + month : month}月${day < 10 ? "0" + day : day
        }日 ${hours < 10 ? "0" + hours : hours}时${minutes < 10 ? "0" + minutes : minutes
        }分${seconds < 10 ? "0" + seconds : seconds}秒 ${weekdayText}`;
      return formattedTime;
    },
  },
  beforeDestroy() {
    this.stopPolling();
  },
  // 里面的函数只有调用才会执行
  methods: {
    startPolling() {
      this.pollingTimer = setInterval(this.gitDaylist, 35000); // 每35秒刷新一次（根据需要进行调整）
    },
    stopPolling() {
      clearInterval(this.pollingTimer);
    },
    pauseTimer() {
      clearInterval(this.intervalId);
      this.isPaused = true;
    },
    resumeTimer() {
      this.intervalId = setInterval(() => {
        this.date = new Date();
      }, 1000);
      this.isPaused = false;
    },
    // 交易总笔数
    getSCE() {
      this.chart = Chart.init(this.$refs.SCEchart);
      this.chart.setOption(this.option);
    },
    getpay() {
      this.chart = Chart.init(this.$refs.payEchart);
      this.chart.setOption(this.payoption);
    },
    // 达成率
    getpayNum() {
      this.chart = Chart.init(this.$refs.payNumEchart);
      this.chart.setOption(this.payNumoption);
    },
    //每小时生成数量
    gitDaylist() {
      getoutputlist().then(res => {
        this.option.xAxis[0].data = res.data.data.map((element) => element.start);
        let Element = this.option.xAxis[0].data.shift();
        this.option.xAxis[0].data.push(Element)
        this.option.series[0].data = res.data.data.map((element) => element.total18th);
        this.option.series[1].data = res.data.data.map((element) => element.total26th);
        this.option.series[2].data = res.data.data.map((element) => element.total30th);
        this.getSCE();
        this.getgrtmachineList()
        this.getroletaskList()
      })
    },
    getgrtmachineList() {
      grtmachine().then(res => {
        this.equipment = res.data.data
      })
    },
    getroletaskList() {
      roletask().then(res => {
        this.tableData = res.data.data
        this.UserData = res.data.charges
        // let okNube = res.data.yields
        // this.payNumoption.series[0].data[1].value = okNube.all_ok
        // this.payNumoption.series[0].data[0].value = okNube.all_ng
        let datalist = []
        datalist = res.data.ngs
        this.payoption.series[0].data = []
        for (var i = 0; i < datalist.length; i++) {
          this.payoption.series[0].data.push({ value: datalist[i].ngs, name: datalist[i].serials })
        }
        this.getpayNum();
        this.getpay()
      })

    }

  },
};
</script>

<style lang="scss">
.messageInfo {
  display: flex;
  justify-content: space-between;
  border-top: 2px solid #93d9f3;
  line-height: 60px;
  font-size: 20px;
  color: #fff;

}

.DataTime {
  display: flex;
  margin-left: 36%;
  justify-content: space-around;
}

.sign {
  display: flex;
}

.signItem {
  flex: 1;
  height: 40px;
  border-right: 1px solid #fff;
  color: #fff;
  line-height: 40px;
}

.stbox {
  width: 100%;
  height: 100%;
  /* box-sizing: border-box; */
  background-color: #56708b;
  padding: 0 20px 20px 20px;
}

.stsearch {
  text-align: center;
}

.text-c {
  text-align: center;
}

.chaencloe {
  color: #17bb74;
}

.redClod {
  color: #f56c6c;
}

.st-gbox {
  background-color: #3b7cb2;
  border-radius: 5px;
  height: 40vh;
  overflow-y: auto;
  box-sizing: border-box;
}

.SecondIcon {
  display: flex;
  flex-wrap: wrap;
  margin-left: 10px;
  background-color: #3b7cb2;
}

.SecondItem {
  flex-basis: 190px;
  border: 2px solid #fff;
  margin: 8px 8px 0 0;
  padding: 4px 0px;
  border-radius: 5px;
}

.SecondName {
  font-size: 11px;
  color: #e6b3ab;
  font-weight: 600;
}

.secondStat {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  display: flex;
  justify-content: space-around;
}

.cavasbox {
  box-sizing: border-box;
  width: 100%;
  height: 100%;

}

.cavaFlex {
  height: 100%;
  width: 50%;
}

.paybox {
  width: 100%;
  background-color: #3b7cb2;
  box-sizing: border-box;
  border-radius: 5px;
  margin-top: 20px;
  height: 33vh;
}

.el-header {
  background-color: #56708b;
  color: #fff;
  font-size: 26px;
  text-align: center;
  line-height: 60px;
}
</style>